import { Button, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import * as React from 'react';
import { useIsFetching } from 'react-query';
import { StudentColumns } from '../types';
// import useStudentQueries from './student-queries';
import useStudentListQuery from './student-query';

export default function StudentTable() {

	const { data, isFetching } = useStudentListQuery();
	// const [{data: student1},{data: student2}, {data: student3}] = useStudentQueries(['001','002','004'])
	// console.log('student :>> ', student1, student2, student3);

	const isFet = useIsFetching();

	const columns: ColumnsType<StudentColumns> = [
		{
			title: '序号',
			render: ( value, _,index)=>{
				return index + 1
			}
		},
		{
			title: '姓名',
			dataIndex: 'name',
		},
		{
			title: '学号',
			dataIndex: 'no',
		},
		{
			title: '爱好',
			dataIndex: 'hobby',
		},
		{
			title: '操作',
			render: (value, record)=>(
				<Space>
					<Button type='link'>编辑</Button>
					<Button type='link' danger>删除</Button>
				</Space>
			)
		}
	]
	return (
		<div>
			{isFet ? (<h1>欢迎来到学生页面</h1>) : null}
			<Table 
				rowKey='id'
				columns={columns}
				dataSource={data}
				loading={isFetching}
				// scroll={{x: 200}}
				// size='small'
			/>
		</div>
	);
}
